<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="counter">
        <button @click="getAudio">测试录音</button>
    </div>
</body>
<script>
    window.onload = function () {
        const Counter = {
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                getAudio() {
                    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                        this.getUserMedia({ audio: true }); // 调用用户媒体设备，访问摄像头、录音、
                    } else {
                        alert("你的浏览器不支持访问用户媒体设备");
                    }
                },
                getUserMedia(constrains) {
                    let that = this;
                    if (navigator.mediaDevices.getUserMedia) {
                        // 最新标准API、
                        navigator.mediaDevices.getUserMedia(constrains).then(stream => { that.success(stream); }).catch(err => { that.error(err); });
                    } else if (navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                        // webkit内核浏览器
                        if (navigator.mediaDevices === undefined) {
                            navigator.mediaDevices = {};
                        }

                        // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
                        // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
                        if (navigator.mediaDevices.getUserMedia === undefined) {
                            navigator.mediaDevices.getUserMedia = function (constraints) {

                                // 首先，如果有getUserMedia的话，就获得它
                                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

                                // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                                if (!getUserMedia) {
                                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                                }

                                // 否则，为老的navigator.getUserMedia方法包裹一个Promise
                                return new Promise(function (resolve, reject) {
                                    getUserMedia.call(navigator, constraints, resolve, reject);
                                });
                            }
                        }
                        navigator.mediaDevices.getUserMedia(constrains).then(stream => {
                            that.success(stream);
                        }).catch(err => {
                            that.error(err);
                        });
                    } else if (navigator.getUserMedia) {
                        // 旧版API
                        navigator.getUserMedia(constrains).then(stream => { that.success(stream); }).catch(err => { that.error(err); });
                    }
                },
                // 成功的回调函数
                success(stream) {
                    alert("已点击允许,开启成功");
                },
                // 异常的回调函数
                error(error) {
                    alert("访问用户媒体设备失败：", error.name, error.message);
                }
            },
            mounted() {
                this.getAudio()
            },
        }
        Vue.createApp(Counter).mount('#counter')

    }
</script>

</html>